<template>
	<view class="container box" v-if="details">
		<!-- <view class="head" :style="`background-image:url(${details.image})`"> -->
		<scroll-view scroll-y="true" @scrolltolower="scroll" class="box_list box">
			<!-- <view class="head" :style="`background-image:url(${baseImagejh(details.imagejh)})`"> -->
			<view class="head">
				<view class="info box">
					<view class="store_name">{{details.name}}</view>
					<view class="store_address">
						<image class="add_image" src="/static/images/add_icon.png" mode="widthFix"></image>
						<text>{{details.address}}</text>
					</view>
					<view class="store_time">
						<view class="trade_time">營業時間：{{details.open}}-{{details.close}}</view>
						<view class="store_balance">本店餘額:${{userStoreInfo.balance}}</view>
					</view>
				</view>
			</view>


			<!-- <u-sticky> -->
			<view class="operate box">
				<view class="operate_item box" @tap="toUserCoupons">
					<view class="img">
						<image src="/static/images/tick.png" mode=""></image>
					</view>
					<text>我的票券</text>
				</view>
				<view class="operate_item box" @tap="toOrder">
					<image src="/static/images/dingdan.png" class="img" mode=""></image>
					<text>訂單</text>
					<view class="tips" v-if="obligationList.length">
						<u-icon color='#ff914d' size="20" name="error"></u-icon>
					</view>
				</view>
				<view v-if="shareOpen" class="operate_item box" @tap="share_reward">
					<image src="/static/images/web__jiangli.png" class="img"></image>
					<text>分享</text>
				</view>
				<view class="operate_item box" @tap="stored_value">
					<image src="/static/images/chongzhi1.png" class="img" mode=""></image>
					<text>儲值</text>
				</view>
				<view class="operate_item box" @tap="ticket_roll_buy">
					<view class="img">
						<image src="/static/images/tick.png" mode=""></image>
					</view>
					<text>電子票卷購買</text>
				</view>
				<view class="operate_item box" @tap="receive_coupon">
					<image src="/static/images/quan.png" class="img" mode=""></image>
					<text>領取優惠卷</text>
				</view>
				<view v-if="!shareOpen" style="background-color: #F3F5F9;" class="operate_item box">
				</view>

			</view>
			<!-- </u-sticky> -->
			<u-popup :show="showShareReward" @close="showShareReward=false" mode="center" round="16"
				:closeOnClickOverlay="true">
				<view class="share_reward box">
					<view class="title">
						<image src="/static/images/web__jiangli.png" class="img"></image>
						<view>邀請新朋友註冊</view>
					</view>
					<view style="font-size: 24rpx;text-align: center;">朋友接受邀請并註冊成功，可得體驗卷</view>
					<view class="invite_code" @tap="copy">{{invite_code}}</view>
					<view class="go_invite" @tap="copy">複製邀請碼</view>
					<image src="/static/images/guanbi.png" class="close" @tap="closePopup"></image>
				</view>
			</u-popup>



			<!-- <scroll-view scroll-y="true" @scrolltolower="scroll" class="box_list box" v-if="room_list.length"> -->

			<!-- <view class="box_item box" v-for="item in details.rooms" :key="item.id"> -->
			<view class="box_item box" v-if="room_list.length" @tap="book_now(item)" v-for="item in room_list"
				:key="item.id">
				<view class="box_top">
					<text class="box_top_name">{{item.name}}</text>
					<view class="free" v-if="item.room_status!==1">{{setRoomStatus(item.room_status)}}</view>
					<view class="using" v-if="item.room_status==1">
						<view class="using_text">使用中</view>
						<view class="count_down">
							<u-count-down :time="countDown(item.order_end)" format="HH:mm:ss"></u-count-down>
							<text>結束</text>
						</view>
					</view>
					<view class="free" style="background: red;" v-if="item.room_status==4">{{item.room_status_msg}}
					</view>
				</view>
				<view class="price">
					<view class="img">
						<!-- <image :src="item.image" mode="widthFix"></image> -->
						<u-image :src="item.image" mode="" :lazy-load="true"></u-image>
						<!-- <u-image :src="baseImage(item.image)" mode="" :lazy-load="true"></u-image> -->

					</view>
					<view class="period_time" v-if="item.package_list.length">
						<view class="period_time_item box" v-for="(package_item,index) in item.package_list"
							:key="index">
							<text style="margin-right: 10rpx;">{{package_item.duration_hour}}小時</text>
							<text style="margin-right: 10rpx;">現價${{Math.floor(package_item.price)}}</text>
							<!-- <text>會員價<text
									style="color:#FA533D;">${{memberPrice(package_item.vip_price)}}/時</text></text> -->
							<!-- <text>會員價<text style="color:#FA533D;">${{package_item.vip_price}}/時</text></text> -->
							<!-- <text>會員價<text
									style="color:#FA533D;">${{setMemberPrice(package_item.price)}}/時</text> --></text>
						</view>

					</view>
					<view v-else style="flex: 1;text-align: center;">暫無可選套餐</view>
				</view>
				<view class="box_tag">
					<view class="box_tag_left">
						<view v-for="(lab_item,index) in item.label" :key="index">
							{{lab_item}}
						</view>
					</view>
					<view class="book_btn">
						<!-- <view class="now_book" @tap="book_now(item)">立即預訂</view> -->
						<view class="now_book">立即預訂</view>
					</view>
				</view>
				<!-- <view class="book_btn">
					<view class="now_book" @tap="book_now(item)">立即預訂</view>
				</view> -->
				<view class="can_book_time">
					<text>已預訂時段</text>
					<text>可預訂時段</text>
				</view>

				<!-- <view class="book_state box" v-if="timeStampList.length">
					<view style="display: flex;">
						<view class="bs" v-for="(timeitem,index) in timeStampList" :key="index"
							:style="{width:100/timeStampList.length + '%' }" style="height: 30rpx;">
							<view class="bs_deep" v-for="(deepItem,dindex) in orderTimeStamp(item.times)" :key="dindex">
								<view v-if="timeitem>=deepItem.start && timeitem<=deepItem.end" class="deep"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<view :style="{width:100/num_time.length + '%' }" v-for="(item,index) in num_time" :key="index">
							<text>{{cut(item,'hour')}}</text>
						</view>
					</view>
				</view> -->

				<!-- <view class="book_state box" v-else>
					<view style="display: flex;">
						<view class="bs" v-for="(num_item,index) in num_time_stamp" :key="index"
							:style="{width:100/num_time.length + '%' }" style="height: 30rpx;">
							<view class="bs_deep" v-for="(deepItem,dindex) in orderTimeStamp(item.times)" :key="dindex">
								<view v-if="num_item>=deepItem.start && num_item<=deepItem.end" class="deep"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<view :style="{width:100/num_time.length + '%' }" v-for="(item,index) in num_time" :key="index">
							<text>{{cut(item,'hour')}}</text>
							<text v-if="cut(item,'minute')">:</text>
							<text>{{cut(item,'minute')}}</text>
						</view>
					</view>
				</view> -->

				<view class="book_state box">
					<view style="display: flex;">
						<view class="bs" style="height: 30rpx;" v-for="(timeBarItem,timebarIndex) in timeBar"
							:key="timebarIndex" :style="{width:100/timeBar.length + '%' }">
							<view class="bs_deep" v-for="(orderTimeItem,orderIndex) in orderTimelot(item.times)"
								:key="orderIndex">
								<view class="deep" :style="{width:setWidth(timeBarItem,orderTimeItem) + '%'}"
									v-if="timeBarItem>=orderTimeItem.start && timeBarItem<=orderTimeItem.end"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<view :style="{width:100/timeBarText.length + '%' }" v-for="(item,index) in timeBarText"
							:key="index">
							<text>{{item==0?'次日':item}}</text>
						</view>
					</view>
				</view>

			</view>

			<view class="" v-if="!flag" style="margin: 30rpx;text-align: center;">到底啦~</view>
			<view style="text-align: center;margin-top: 100rpx;" v-if="!room_list.length">暫無房間信息</view>
		</scroll-view>



	</view>
</template>

<script>
	import store from "@/store/index.js"
	import {
		getStoreRoom
	} from '@/api/index.js'

	import {
		getInviteCode,
		getStoreInfo,
		getUserStoreInfo
	} from '@/api/me.js'
	import baseURL from '@/utils/baseURL.js'

	import {
		getOrderList
	} from '@/api/order.js'

	export default {
		data() {
			return {
				// num_time: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, "次日", 1],
				num_time: [],
				num_time_stamp: [],
				timeStampList: [],
				colorDeep: [],
				colorDeepStamp: [],
				details: "",
				// 包廂狀態  0--空閒  1--預訂  2--待打掃  3--打掃中  4--故障

				// 包廂列表
				room_list: [],
				// 門店配置信息
				store_config: '',
				showShareReward: false,
				invite_code: '',
				flag: true,
				page: 1,
				shareOpen: false,
				userStoreInfo: '', // 用戶店鋪信息
				btns: ['電子票卷購買', '儲值', '領取優惠卷', '訂單'],
				btnWidth: 0,
				userOrder: [],
				obligationList: [], // 待付款訂單列表
				store_id: '',
				token: null,
				time: null,

				// 时间展示条
				timeBar: [], // 存放当前时间之后的24小时
				timeBarText: [], // 存放时间文本
			};
		},
		methods: {
			ticket_scanning: function() {
				uni.navigateTo({
					url: "/pages/ticket_scanning/ticket_scanning"
				})
			},
			stored_value: function() {
				if (uni.getStorageSync('ONEtoken')) {
					uni.navigateTo({
						url: "/pages/stored_value/stored_value"
					})
				} else {
					uni.navigateTo({
						url: "/pages/login_register/login_register?flag=0"
					})
				}

			},
			book_now: function(item) {

				if (uni.getStorageSync('ONEtoken') !== "") {
					uni.navigateTo({
						url: `/pages/book_now/book_now?id=${JSON.stringify(item.id)}`
					})
				} else {
					uni.showToast({
						title: "請先登陸",
						icon: 'none',
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login_register/login_register?flag=0"
						}, 1000)
					})
				}

			},
			contact_manager() {},
			ticket_roll_buy() {
				uni.navigateTo({
					url: `/pages/electronic_ticket_roll/ticket_roll_buy/ticket_roll_buy?id=${this.details.id}`
				})
			},
			stored_card_buy() {
				// uni.navigateTo({
				// 	url:"/pages/shop_details/stored_card_buy/stored_card_buy"
				// })
				uni.navigateTo({
					url: `/pages/shop_details/shop_stored_card/shop_stored_card?id=${this.details.id}`
				})
			},
			receive_coupon() {
				uni.navigateTo({
					url: `/pages/shop_details/receive_coupon/receive_coupon?id=${this.details.id}`
				})
			},
			reservation_time() {
				// console.log(this.store_config.order_end_time)
				// console.log(this.store_config, '店鋪配置')
				// console.log(this.details.open, '開店時間')
				// 設置預約時間段總時長（根據店鋪營業時間）
				let startTime = Number(this.details.open.split(':')[0])
				// let endTime = this.store_config ? Number(this.details.close.split(':')[0]) - Number(this
				// 	.store_config.order_end_time.split(
				// 		':')[0]) : Number(this.details.close.split(':')[0])

				let endTime = 0
				if (this.store_config) {
					if (this.store_config.order_end_time) {
						endTime = Number(this.details.close.split(':')[0]) - Number(this
							.store_config.order_end_time.split(':')[0])
					} else {
						endTime = Number(this.details.close.split(':')[0])
					}
				} else {
					endTime = Number(this.details.close.split(':')[0])
				}


				// 將營業時間轉換成時間戳
				let startTimeStamp = startTime * 60 * 60 * 1000
				let endTimeStamp = endTime * 60 * 60 * 1000

				if (endTimeStamp <= startTimeStamp) {
					endTimeStamp = endTimeStamp + 24 * 60 * 60 * 1000
				}

				// console.log(startTimeStamp, endTimeStamp, "時間戳")

				if (this.store_config) {
					// 按照店鋪配置的時間表間隔
					let h = 0
					let m = 0
					if (this.store_config.schedule_interval) {
						h = Number(this.store_config.schedule_interval.split(':')[0])
						// let h = 0
						m = Number(this.store_config.schedule_interval.split(':')[1])
					} else {
						h = 1
						m = 0
					}

					// 時間表間隔時間戳
					let timeStamp = h * 60 * 60 * 1000 + m * 60 * 1000
					let arr = []
					for (var i = startTimeStamp; i <= endTimeStamp; i += timeStamp) {
						if ((i / 60 / 60 / 1000) >= 24) {
							arr.push(i - (24 * 60 * 60 * 1000) ? i - (24 * 60 * 60 * 1000) : 24 * 60 * 60 * 1000)
						} else {
							arr.push(i)
						}

					}
					this.timeStampList = [...arr]
					// console.log(this.timeStampList, '時間條')

					let hour = ''
					let min = ''
					arr.forEach(item => {
						hour = Math.floor(item / 1000 / 60 / 60)
						min = Math.floor((item % (1000 * 60 * 60)) / (1000 * 60))
						min = min > 10 ? min : '0' + min
						this.num_time.push(hour + ':' + min)
					})


					let arrColor = []
					this.colorDeep.forEach(item => {
						arrColor.push({
							start: item.start * 60 * 60 * 1000,
							end: item.end * 60 * 60 * 1000
						})
					})

					this.colorDeepStamp = [...arrColor]

				} else {
					// 當營業時間不超過24點的時候
					if (endTime < 24) {
						for (var i = startTime; i <= endTime; i++) {
							this.num_time.push(i)
						}
					}
					// 當營業時間是超過24點，即開到凌晨或者24小時營業的時候
					if (endTime <= startTime) {
						for (var i = startTime; i <= endTime + 24; i++) {
							if (i < 24) {
								this.num_time.push(i)
							} else if (i == 24) {
								this.num_time.push('次日')
							} else {
								this.num_time.push(i - 24)
							}
						}
					}

					this.numTimeStamp(this.num_time)
				}

			},
			numTimeStamp(arr) {
				// console.log(arr, 'arr')
				let a = arr.indexOf('次日')
				let arrStamp = arr.map((item, index) => {
					if (a !== -1) {
						if (index > a) {
							return item * 60 * 60 * 1000 + 24 * 60 * 60 * 1000
						} else if (index == a) {
							return 24 * 60 * 60 * 1000
						} else {
							return item * 60 * 60 * 1000
						}
					} else {
						return item * 60 * 60 * 1000
					}
				})

				this.num_time_stamp = [...arrStamp]

			},
			// 訂單預訂時間
			orderTimeStamp(arr) {
				let a = arr.map(item => {
					let startH = new Date(item.start * 1000).getHours()
					let startM = new Date(item.start * 1000).getMinutes()
					let endH = new Date(item.end * 1000).getHours()
					let endM = new Date(item.end * 1000).getMinutes()
					return {
						start: startH + ':' + startM,
						end: endH + ':' + endM
					}
				})
				// console.log(a, 'aaaaa')
				let b = a.map(item => {
					if (this.hourMinStamp(item.start) >= this.hourMinStamp(item.end)) {
						return {
							start: this.hourMinStamp(item.start),
							end: this.hourMinStamp(item.end) + 24 * 60 * 60 * 1000
						}

					} else {
						return {
							start: this.hourMinStamp(item.start),
							end: this.hourMinStamp(item.end)
						}
					}

				})

				return b
			},
			hourMinStamp(time) {
				let h = Number(time.split(':')[0]) * 60 * 60 * 1000
				let m = Number(time.split(':')[1]) * 60 * 1000
				return h + m
			},
			share_reward() {
				this.showShareReward = true
				getInviteCode({
					store_id: this.details.id,
				}).then(res => {
					this.invite_code = res.data.invite_code
				})
			},
			closePopup() {
				this.showShareReward = false
			},
			copy() {
				uni.setClipboardData({
					data: this.invite_code,
					success: () => {
						uni.showToast({
							title: '已複製到粘貼板',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			cut(time, type) {
				time = time.toString()
				if (time.indexOf(':') !== -1) {
					if (type == 'hour') {
						return time.split(':')[0]
					} else if (type == 'minute') {
						return time.split(':')[1]
					}
				} else {
					if (type == 'hour') {
						return time
					} else if (type == 'minute') {
						return ''
					}
				}
			},
			memberPrice(price) {
				return (Number(price) * this.details.vip_rate / 10)
			},
			countDown(end) {
				if (!end) return
				/*
				let a = new Date(end * 1000)
				// console.log(a, '訂單結束時間')
				let h = a.getHours()
				let m = a.getMinutes()
				let s = a.getSeconds()
				let now = new Date()
				// console.log(now, '當前時間')
				let nowH = now.getHours()
				let nowM = now.getMinutes()
				let nowS = now.getSeconds()

				if (h <= nowH) {
					h = 24 + h
				}

				return (h * 60 * 60 * 1000 + m * 60 * 1000 + s * 1000) - (nowH * 60 * 60 * 1000 + nowM * 60 * 1000 +
					nowS *
					1000)
				*/
				end = new Date(end * 1000).getTime()
				let now = new Date().getTime()
				return end - now

			},
			scroll() {
				if (this.flag) {
					getStoreRoom({
						store_id: this.details.id,
						page: ++this.page
					}).then(res => {
						if (res.data.room.length) {
							this.room_list = this.room_list.concat(res.data.room)
						} else {
							this.flag = false
						}
					})
				}
			},
			baseImage(url) {
				return baseURL + url
			},
			setMemberPrice(price) {
				// console.log(this.details, '查看')
				if (this.userStoreInfo.user_level) {
					return this.details.vip_rate ? price * this.details.vip_rate / 10 : price
				} else {
					return price
				}
			},
			baseImagejh(str) {
				let arr = str.split(',')
				// console.log(arr,'詳情圖')
				return baseURL + arr[0]
			},
			setRoomStatus(status) {
				switch (status) {
					case 0:
						return '空閒'
					case 1:
						return '使用中'
					case 2:
						return '待打掃'
					case 3:
						return '打掃中'
					case 4:
						return '故障'
				}
			},
			toOrder() {
				if (!this.token) {
					uni.reLaunch({
						url: '/pages/login_register/login_register?flag=0'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/shop_details/order_list/order_list?store_id=${this.store_id}`
				})
			},
			getOrderListFn() {
				const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				const params = {
					page: 1,
					user_id: userInfo.id,
					store_id: this.store_id
				}
				getOrderList(params).then(res => {
					// console.log(res.data, '用戶訂單列表')
					this.userOrder = res.data

					this.obligationList = res.data.filter(item => item.status == 10)
					// console.log(this.obligationList,'待付款訂單')
				})
			},
			toUserCoupons() {
				uni.navigateTo({
					url: `/pages/shop_details/user_coupons/user_coupons?store_id=${this.store_id}`
				})
			},
			refresh() {
				// clearInterval(this.time)
				this.time = setInterval(() => {
					getStoreRoom({
						store_id: this.details.id
					}).then(res => {
						this.room_list = res.data.room
					})
				}, 10 * 60 * 1000)
			},

			// 时间条
			setTimeBar() {
				// 获取当前时间的时间戳
				let now = new Date().getTime()
				let end = now + 3600000 * 24
				for (var i = now; i <= end; i += 1800000) {
					this.timeBar.push(i)
				}
				for (var j = now; j <= end; j += 3600000) {
					this.timeBarText.push(this.setTimeHours(j))
				}
			},
			setTimeHours(num) {
				return new Date(num).getHours()
			},
			orderTimelot(arr) {
				if (!arr.length) return []
				let a = []
				arr.forEach(item => {
					a.push({
						start: item.start * 1000,
						end: item.end * 1000
					})
				})
				return a
			},
			setWidth(time, item) {
				return item.end / time * 100
				// console.log(item.end / time)
				// return 100
			},
		},
		onLoad(option) {
			this.token = uni.getStorageSync('ONEtoken')
			this.store_id = option.obj
			getStoreInfo({
				store_id: decodeURIComponent(JSON.parse(option.obj))
			}).then(res => {
				this.details = res.data
				// console.log(this.details, "門店詳情")
				this.$store.commit('updateStoreDetails', this.details)
			}).then(() => {
				getUserStoreInfo({
					store_id: this.details.id
				}).then(res => {
					// console.log(res.data, '用戶店鋪信息')
					this.userStoreInfo = res.data
				})
			}).then(() => {

				// 獲取當前門店的包廂列表
				getStoreRoom({
					store_id: decodeURIComponent(JSON.parse(option.obj))
				}).then(res => {
					// console.log(res.data, "門店信息")
					this.room_list = res.data.room
					// console.log(this.room_list, '查看')
					this.store_config = res.data.store_config
					// console.log(this.store_config,'1111111111111')
					if (this.store_config) {
						if (this.store_config.share_reward_open == 1) {
							this.shareOpen = true
							this.btns.push('分享奬勵')

						}
					}
					this.btnWidth = 100 / this.btns.length - 3

					this.reservation_time()

					if (this.room_list.length) {
						this.orderTimeStamp(this.room_list[0].times)
					}

					// this.btns.push('分享奬勵')

				})
			})

			this.refresh()

			// 设置时间条
			this.setTimeBar()
		},
		onShow() {
			this.getOrderListFn()
		},
		onHide() {
			clearInterval(this.time)
		},
		onUnload() {
			clearInterval(this.time)
		}
	}
</script>

<style lang="less" scoped>
	.box {
		box-sizing: border-box;
	}

	.container {
		background: #F3F5F9;
		min-height: calc(100vh - 90rpx);
		padding-bottom: 30rpx;

		// padding: 0 30rpx;
		.head {
			// height: 358rpx;
			background-color: #39B19D;
			padding-top: 1rpx;
			background-repeat: no-repeat;
			background-size: cover;
			// padding-bottom: 20rpx;

			.info {
				// height: 268rpx;
				background-color: #fff;
				border-radius: 16rpx;
				// border: 1rpx solid #fff;
				margin: 30rpx 30rpx 0;
				padding: 18rpx 19rpx 18rpx 35rpx;



				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 13rpx;

					.left {
						.name {
							font-size: 36rpx;
							font-weight: bold;
							margin-bottom: 5rpx;
						}

						.time {
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 30rpx;
							}

							text {
								font-size: 30rpx;
							}
						}
					}

					.right {
						font-size: 25rpx;
						color: #FA533D;
						font-weight: bold;
					}
				}

				.middle {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;

					.tag {
						display: flex;
						flex-wrap: wrap;

						view {
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 16rpx;
							border: 1rpx solid #39B19D;
							color: #39B19D;
							font-size: 30rpx;
							padding: 0 13rpx;
							margin: 0 15rpx 10rpx 0;
						}
					}

					.contact {
						// flex: 1;
						display: flex;
						align-items: center;
						min-width: 120rpx;
						flex: 1;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						text {
							font-size: 30rpx;
						}
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 13rpx;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						text {
							font-size: 30rpx;
						}
					}

					.right {
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.level {
					padding: 10rpx 0;
				}

				.store_name {
					font-size: 40rpx;
					font-weight: 600;
					color: #000;
					text-align: center;
					margin-bottom: 10rpx;
				}

				.store_address {
					display: flex;
					align-items: center;
					height: 40rpx;

					.add_image {
						width: 30rpx;
						margin-right: 10rpx;
					}
				}

				.store_time {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.operate {
			// height: 203rpx;
			background: #F3F5F9;
			margin-top: 10rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.operate_item {
				width: 200rpx;
				background-color: #F8FDFB;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				// justify-content: space-evenly;
				align-items: center;
				padding: 25rpx 10rpx;
				margin-bottom: 15rpx;
				position: relative;
				border: 1rpx solid #39B19D;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 10rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				text {
					font-size: 28rpx;
					text-align: center;
				}

				.tips {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
		}

		.box_list {
			// padding: 0 30rpx;
			// margin-top: 10rpx;
			height: 92vh;
			box-sizing: border-box;

			.box_item {
				// width: 690rpx;
				// min-height: 618rpx;
				margin: 0 30rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				padding: 30rpx 0;
				margin-bottom: 15rpx;

				.box_top {
					display: flex;
					align-items: center;
					justify-content: space-evenly;

					.box_top_name {
						// margin: 0 89rpx 0 201rpx;
						// margin-left: 100rpx;
						font-size: 36rpx;
					}

					.free {
						width: 117rpx;
						height: 46rpx;
						background: #39B19D;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						line-height: 46rpx;
						text-align: center;
						font-size: 30rpx;
						color: #fff;
					}

					.using,
					.cleaning {
						min-width: 235rpx;
						height: 46rpx;
						border-radius: 16rpx;
						border: 1rpx solid #707070;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.using_text {
							width: 92rpx;
							height: 100%;
							background: #FA533D;
							font-size: 30rpx;
							text-align: center;
							line-height: 46rpx;
							border-radius: 16rpx;
							color: #fff;
						}

						.cleaning_text {
							background-color: #39B19D;
						}

						.count_down {
							font-size: 30rpx;
							margin-right: 10rpx;
							display: flex;
							align-items: center;
						}
					}

				}

				.price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.img {
						width: 340rpx;
						height: 225rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						// border: 1rpx solid #707070;
						margin: 0 16rpx 17rpx 13rpx;
						overflow: hidden;

						image {
							width: 100%;
						}

						/deep/ .u-image__image {
							width: 340rpx !important;
							height: 225rpx !important;
						}

						/deep/ .u-image__error {
							width: 340rpx !important;
							height: 225rpx !important;
						}

						/deep/ .u-image__loading {
							width: 340rpx !important;
							height: 225rpx !important;
						}
					}

					.period_time {
						max-height: 190rpx;
						overflow-y: scroll;
						margin-right: 10rpx;

						.period_time_item {
							color: #1C36CD;
							font-weight: bold;
							font-size: 28rpx;
							width: 300rpx;
							// width: 100%;
							height: 57rpx;
							background: #F3F5F9;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							opacity: 1;
							border: 1rpx solid #707070;
							line-height: 57rpx;
							padding: 0 15rpx 0 10rpx;
							margin-bottom: 11rpx;
							text-align: center;

							display: flex;
							justify-content: space-around;

							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							// text{
							// 	margin-right: 31rpx;
							// }
						}
					}
				}

				.box_tag {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
				}

				.box_tag_left {
					display: flex;
					flex-wrap: wrap;
					padding: 0 20rpx;
					box-sizing: border-box;

					view {
						height: 39rpx;
						line-height: 39rpx;
						text-align: center;
						color: #39B19D;
						font-size: 24rpx;
						padding: 0 7rpx;
						border-radius: 16rpx;
						border: 1rpx solid #39B19D;
						margin-right: 33rpx;
						margin-bottom: 10rpx;

						&:last-child {
							margin-right: 0;
						}


					}
				}

				.book_btn {
					display: flex;
					justify-content: flex-end;

					.now_book {
						width: 140rpx;
						height: 46rpx;
						background: #39B19D;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						font-size: 30rpx;
						line-height: 46rpx;
						text-align: center;
						color: #fff;
						margin: 25rpx 26rpx 46rpx 0;
					}
				}

				.can_book_time {
					display: flex;
					justify-content: space-around;
					margin-bottom: 29rpx;

					text {
						font-size: 24rpx;
						// margin-left: 7rpx;
						display: flex;
						align-items: center;

						&::before {
							content: "";
							display: inline-block;
							width: 30rpx;
							height: 30rpx;
							background: #39B19D;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							opacity: 1;
							border: 1rpx solid #707070;
							margin-right: 7rpx;
						}

						&:last-child::before {
							background-color: #fff;
						}
					}
				}

				.book_state {
					padding: 0 11rpx;

					.bs {
						border: 1rpx solid #707070;
						border-right: none;
						position: relative;

						&:last-child {
							border-right: 1rpx solid #707070;
						}

						&:nth-child(2n) {
							border-left: none;

							&::before {
								content: '';
								width: 1rpx;
								height: 50%;
								display: block;
								position: absolute;
								background-color: #FA533D;
								left: 0%;
								bottom: 0%;
								z-index: 2;
							}
						}

						.bs_deep {
							position: relative;
						}

						.deep {
							background: #39B19D;
							height: 30rpx;
							// width: 30rpx;
							width: 100%;
							position: absolute;
							z-index: 1;
						}
					}

					.item {
						display: flex;
						font-size: 17rpx;
						// text-align: center;

						view {
							display: flex;
							justify-content: center;
							flex-direction: column;
						}
					}
				}

			}
		}

		.share_reward {
			width: 688rpx;
			height: 563rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
				text-align: center;
				margin-bottom: 16rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.invite_code {
				padding: 20rpx;
				min-width: 120rpx;
				background-color: #F8FDFB;
				color: #999;
				display: inline-block;
				margin: 30rpx auto;
				text-align: center;
			}

			.go_invite {
				width: 171rpx;
				height: 66rpx;
				background: #39B19D;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				border: 1rpx solid #39B19D;
				font-size: 30rpx;
				color: #fff;
				line-height: 66rpx;
				text-align: center;
			}

			.close {
				width: 70rpx;
				height: 70rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>